<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户—合同详情</title>
    <meta name="author" content="dc">
    <link rel="stylesheet" type="text/css" href="/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.min.css">
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css"/>
    <link rel="stylesheet" href="/css/bootstrapValidator.min.css" />
    <!--固定table列-->
    <link href="/js/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet"/>
    <!--时间选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" href="/css/input_tags.css" />
    <link rel="stylesheet" type="text/css" href="/css/daterangepicker.css" />
    <!--日期选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css"/>
    <!-- 多选下拉 -->
    <link rel="stylesheet" href="/css/bootstrap-multiselect.css" type="text/css"/>
    <link rel="stylesheet" href="/css/bootstrap-select.css" type="text/css"/>
    <link rel="stylesheet" href="/css/skin.css"/>
    <link rel="stylesheet" href="/css/viewer.css">
    <!--自定义css-->
    <link rel="stylesheet" href="/css/csd/customerManager/customerContractDetail.css">
</head>

<body>
<!--合同表主键-->
<input type="hidden" id="contractId" name="contractId" th:value="${contractId}"/>
<!--产品订单表主键-->
<input type="hidden" id="orderId" name="orderId" th:value="${orderId}"/>

<div class="container-fluid clue-page">
    <div class="card">
        <div class="card-header">
            <h1>合同详情</h1>
        </div>
        <div class="card-body">
            <form class="well form-well"  id="customerForm" >
                <span id="contractStatus" hidden="hidden"></span>
                <div style="position: relative">
                    <h3>合同详情</h3>
                    <div class="pull-right edit-text" >
                        <button type="button" id="editContractBtn" class="btn btn-link" data-toggle="modal" data-target="#editContractModal" style="color: #4460F1">编辑<i class="mdi mdi-tune"></i></button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label">合同类型:</label>
                        <span id="contractType"></span>
                    </div>

                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label ">合同起止日期:</label>
                        <span id="contractDate"></span>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label ">合同编号：</label>
                        <span id="contractNumber"></span>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <input type="hidden" id="customerId" >
                        <input type="hidden" id="customerType" >
                        <label class="control-label">客户名称：</label>
                        <a href=""><span id="customerName"></span></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label ">客户联系人：</label>
                        <span id="contactName"></span>

                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label">创建人：</label>
                        <span id="createPeopleName"></span>

                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label ">联系方式：</label>
                        <span id="contactDetails"></span>
                        <span class="icon-tel" id="tel-call" onclick="TelCall()"><a href="#" class="icon-tel" id="tel-dial"><i class="mdi mdi-phone icon-tel"></i></a></span>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label">客户邮箱：</label>
                        <span id="customerEmail"></span>

                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="followBtnCon">
                        <label class="control-label">关联赢单/跟进：</label>
                        <a href="javascript:" id="followUpDetailBtn" onClick="openFollowUpDetail()">查看</a>
                    </div>

                    <!--查看跟进详情(关联记录)-->
                    <div id="followUpDetail" class="clearFix">
                        <div class="clearFix">
                            <i class="mdi mdi-close closeBtn pull-right" onClick="closeFollowUpDetail()"></i>
                        </div>
                        <header class="mainTitle">
                            <img src="/images/contractReviewManager/guanlianjilu.png" alt="" style="vertical-align: text-top;margin-right:5px;"><sapn>关联记录</sapn>
                        </header>
                        <div class="followContainer">
                            <main>
                                <div class="detailModal followInfoContainer">
                                    <header class="modalTitle" id="followWay"></header>
                                    <main class="modalContent">
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <label class="control-label">联系人姓名:</label>
                                            <span id="personName"></span>
                                        </div>
<!--                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">-->
<!--                                            <label class="control-label">地址:</label>-->
<!--                                            <span id="visitAddress"></span>-->
<!--                                        </div>-->
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="customerQualityCon">
                                            <label class="control-label">客户质量:</label>
                                            <span id="customerQuality"></span>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <label class="control-label">联系人电话:</label>
                                            <span id="userPhone"></span>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <label class="control-label">跟进时间:</label>
                                            <span id="followTm"></span>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="nextPlanTimeCon">
                                            <label class="control-label">下一次跟进时间:</label>
                                            <span id="nextPlanTime"></span>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="customerIntentionCon">
                                            <label class="control-label">客户意向:</label>
                                            <span id="customerIntention"></span>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="followPurposeCon">
                                            <label class="control-label">客户目的:</label>
                                            <span id="followPurpose"></span>
                                        </div>
                                    </main>
                                </div>
                                <div class="detailModal followInfoContainer">
                                    <header class="modalTitle">跟进信息</header>
                                    <main class="modalContent followInfo">
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="accompanyingPersonCon">
                                            <label class="control-label">陪访人:</label>
                                            <span id="accompanyingPerson"></span>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                            <label class="control-label">沟通时长:</label>
                                            <span id="communicationTime"></span><span>分钟</span>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="clueScoreCon">
                                            <label class="control-label">线索评分:</label>
                                            <span class="js-raty" id="clueScore" data-score="2" data-number="5" ></span>
                                        </div>
<!--                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 followTag">-->
<!--                                            <label class="control-label" style="padding-top:10px;">线索标签:</label>-->
<!--                                            <span id="tags">-->
<!--                                                </span>-->
<!--                                        </div>-->
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 followTag" style="margin-top:13px;">
                                            <label class="control-label">跟进详情:</label>
                                            <span id="followDetail"></span>
                                        </div>
                                    </main>
                                </div>
                                <div class="detailModal businessDynamics">
                                    <header class="modalTitle">商机动态</header>
                                    <main class="modalContent dynamic" id="dynamic">
                                        <div id="followList">
                                        </div>
                                    </main>
                                </div>
                            </main>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label">创建时间：</label>
                        <span id="createTm"></span>
                    </div>

                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label">到款日期：</label>
                        <span id="payBackDate"></span>

                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 renew-reason ">
                        <label class="control-label">附加费用备注：</label>
                        <span id="orderSurchargeRemark"></span>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 renew-reason ">
                        <label class="control-label">提前/延期原因：</label>
                        <span id="advancePostponementReason"></span>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 renew-reason ">
                        <label class="control-label">附加费用金额：</label>
                        <span id="orderSurcharge"></span>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 renew-reason ">
                        <label class="control-label">合同应收款：</label>
                        <span id="contractReceivables"></span>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 renew-reason ">
                        <label class="control-label">合同总金额：</label>
                        <span id="contractTotalAmount"></span>
                    </div>

                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 renew-reason ">
                        <label class="control-label">合同优惠总金额：</label>
                        <span id="contractDiscountTotalAmount"></span>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label">主合同起止日期：</label>
                        <span id="masterMembershipContractStartEndTime"></span>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 renew-reason ">
                        <label class="control-label">合同实际总金额：</label>
                        <span id="contractActualTotalAmount"></span>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <input type="hidden" id="masterMembershipContractId" >
                        <label class="control-label">会员主合同编号：</label>
                        <a href=""><span id="masterMembershipContract"></span></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 coopportunityNamel-xs-12">
                        <label class="control-label">备注：</label>
                        <a href="javascript:"><span id="remark"></span></a>
                    </div>
                    <div class="col-xs-12 paddNo">
                        <label class="control-label">主合同产品：</label>
                        <table id="masterContractProduct"></table>
                    </div>
                    <div class="col-xs-12 renew-reason" style="margin-top: 20px">
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 annex-group" style="display: none;">
                                <label class="control-label">合同附件：</label>
                                <button class="btn btn-default" type="button" onclick="showFile(0);" disabled>预览</button>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 approval" style="display: none;">
                                <label class="control-label">合同审核：</label>
                                <button class="btn btn-default" type="button" onclick="showFile(1);" disabled>预览</button>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 approval" style="display: none;">
                                <label class="control-label">审核备注：</label>
                                <span id="contractReviewNotes"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <form class="well form-well"  id="orderDetailForm">
                <h3>订单详情</h3>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 renew-reason oderDetail" style="line-height: 40px">
                        <div class="col-lg-4 col-md-4 col-sm-3 col-xs-12">
                            <img src="../../../../images/csd/num-icon.png" alt="" style="margin-right: 10px">
                            订单编号：<span  id="orderNumber"></span></div>
                        <div class="col-lg-4 col-md-4 col-sm-3 col-xs-12">
                            <img src="../../../../images/csd/state-icon.png" alt="" style="margin-right: 10px">
                            订单状态：<span  id="orderStatus"></span></div>
                    </div>
                    <br/>
                    <div class="col-xs-12 subtitle sizeLeft">
                        <p>产品详情</p>
                        <table id="productDetailTable"></table>
                    </div>

                    <div class="col-xs-12 subtitle sizeLeft">
                        <p class="pTag">活动产品</p>
                        <table id="activityProductTable"></table>
                    </div>

                    <div class="col-xs-12 subtitle sizeLeft">
                        <p class="pTag">赠品详情</p>
                        <table id="giftDetailTable"></table>
                    </div>

                    <div class="col-xs-12 subtitle sizeLeft">
                        <p class="pTag">优惠券</p>
                        <table id="couponTable"></table>
                    </div>
                    <div class="col-xs-12 subtitle sizeLeft" >
                        <p style="display: inline-block">审核结果</p>
                        <table id="findAudit"></table>
                        <p style="margin-top: 20px">最终结果： <img src="" alt=""  id="finalResult"></p>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 合同编辑 -->
<div class="modal fade" tabindex="-1" role="dialog" id="editContractModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="editContractForm">
                <input type="hidden" name="customerId">
                <input type="hidden" name="orderId">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4>编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="row" style="padding: 20px  30px">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                            <label class="control-label label-required" >合同类型</label>
                            <div class="form-content">
                                <select id="contractTypeSelect" name="contractTypeSelect" class="form-control" data-live-search="true">
                                    <option value="">请选择</option>
                                    <option value="1">非会员合同</option>
                                    <option value="2">会员新单合同</option>
                                    <option value="3">活动合同</option>
                                    <option value="4">会员续费合同</option>
                                    <option value="5">兑换合同</option>
                                    <option value="6">单品合同</option>
                                    <option value="7">会员单次</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                            <label class="control-label label-required" >合同状态</label>
                            <div class="form-content">
                                <select id="contractStatusSelect" name="contractStatusSelect" class="form-control" data-live-search="true">
                                    <option value="">请选择</option>
                                    <option value="1">未生效</option>
                                    <option value="2">生效中</option>
                                    <option value="3">已结束</option>
                                    <option value="4">已作废</option>
                                    <option value="5">意外终止</option>
                                    <option value="6">挂起</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                            <label class="control-label label-required" >联系方式</label>
                            <div class="form-content">
                                <input type="text" class="form-control" id="contact-details" placeholder="请输入联系方式" name="contactDetails" >
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                            <label class="control-label label-required" >合同起止日期</label>
                            <div class="form-content">
                                <input type="text" class="form-control" id="startAndEndDate" placeholder="请输入合同起止日期" name="startAndEndDate" >
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                            <label class="control-label label-required" >客户联系人</label>
                            <div class="form-content">
                                <input type="text" class="form-control" id="contact-name" placeholder="请输入客户联系人" name="contactName" >
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                            <label class="control-label label-required" >客户邮箱</label>
                            <div class="form-content">
                                <input type="text" class="form-control" id="customer-email" placeholder="请输入客户邮箱" name="customerEmail" >
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                            <label class="control-label label-required" >备注</label>
                            <div class="form-content">
                                <input type="text" class="form-control" id="customer-remark" placeholder="请输入备注" name="customerRemark" >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary link-sure" onclick="submitContract()">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearInp()">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 附件预览 -->
<div class="modal fade bs-example-modal-lg fileModal" tabindex="-1" role="dialog" id="fileModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4>附件预览</h4>
            </div>
            <div class="modal-body">
                <iframe src="" frameborder="0" id="fileIframe"></iframe>
            </div>
        </div>
    </div>
</div>
<!-- 拜访图片弹出框-->
<!--<div class="modal fade" tabindex="-1" role="dialog" id="visitImg">-->
<!--    <div class="modal-dialog" role="document">-->
<!--        <div class="modal-content" style="overflow: hidden">-->
<!--            <div class="modal-header" style="background:#ffffff">-->
<!--                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>-->
<!--                <h4>拜访图片</h4>-->
<!--            </div>-->
<!--            <div class="modal-body">-->
<!--                <div class="banner">-->
<!--                    <div class="swiper-container" style="width: 100%;height: 320px;border-radius: 10px">-->
<!--                        <div class="swiper-wrapper" style="width: 100%;height: 100%;border-radius: 10px">-->
<!--                            <div class="swiper-slide" style="background: #FFFFFF">-->
<!--                                <img id="attachmentUploadUrl" src="" alt="">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="swiper-button-next swiper-button-white n-swiper"></div>-->
<!--                        <div class="swiper-button-prev swiper-button-white l-swiper"></div>-->
<!--                    </div>-->
<!--                    <div class="swiper-bottom swiper-layer" onclick="goDetail()">-->
<!--                        <a href="JavaScript:void(0);" class="title" id="title"></a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
</body>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script src="/js/crm/common/common.js"></script>
<!--表格-->
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!--时间选择插件-->
<script src="/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="/js/crm/common/dataRangePicker.min.js"></script>
<!-- 多选框下拉 -->
<script type="text/javascript" src="/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="/js/bootstrap-select.js"></script>
<!--图片查看-->
<script type="text/javascript" src="/js/viewer.js"></script>
<script type="text/javascript" src="/js/jquery-viewer.js"></script>
<script type="text/javascript" src="/js/bootstrapValidator.min.js"></script>
<!-- 评分插件 -->
<script type="text/javascript" src="/js/jquery.raty.js"></script>
<!--轮播图-->
<script type="text/javascript" src="/js/swiper-bundle.min.js"></script>
<!--自定义js-->
<script type="text/javascript" src="/js/crm/csd/customerManager/customerContractDetail.js"></script>
</html>